<template>
  <div>
    <div class="header" :class="showcontent?'active':''">
      <div class="text">
        <span>{{groupDisplayName}}</span>
        <span>|</span>
        <span>{{historyName}}</span>
      </div>
      <ul class="list">
        <li @click="getSJZ()" :class="timeLimeVisible?'active':''">时间轴</li>
        <li @click="getKZ()" :class="!timeLimeVisible?'active':''">历史快照</li>
        <li @click="handleClick">
          <span v-if="showcontent" class="fa  fa-chevron-down"></span>
          <span v-else class="fa fa-chevron-up"></span>
        </li>
      </ul>
    </div>
    <div class="timeline">
      <div class="content" :class="showcontent?'active':''">
        <!-- 时间轴 -->
        <div v-show="timeLimeVisible" style="background:#696969;position:relative">
          <div id="container" style="height:150px;">
          </div>
          <div class="popover">
            <el-popover placement="top-start" title="时间轴选择" width="200" trigger="click" popper-class="line-popover">
              <ul id="allTimeCheck">
                <el-checkbox-group v-model="checkedNames">
                  <el-checkbox @change="changeselect" v-for="(item,index) in allTimeCheck" :key="'item'+index" :label="item"></el-checkbox>
                </el-checkbox-group>
              </ul>
              <el-button slot="reference" icon="el-icon-setting" class="icon_select"></el-button>
            </el-popover>
          </div>
        </div>
        <!-- 历史快照 -->
        <div v-show="!timeLimeVisible" class="lskz">
          <div v-if="getSnapshotList.length<=0" class="nodata">暂无快照数据</div>
          <li v-else class="box" :class="KZactiveIndex==index?'active':''" @click="selectKZ(index)" v-for="(item,index) in getSnapshotList" :key="'getSnapshotList'+index">
            <div class="text">
              <p>{{item.description}}</p>
              <p>{{item.createTime}}</p>
            </div>
            <div class="hoverBox">
              <el-button type="danger" size="small" @click="delSnapData(item.id,index)">删除</el-button>
              <el-button type="primary" @click="editKZ(item.description,item.id,index)" size="small">编辑</el-button>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import util from "@/utils";
import echarts from "echarts";
import {
  deletedSnap,
  getdetail // 实例详细信息
} from "@/api/relationFraph";
export default {
  data() {
    return {
      // 是否展示content
      showcontent: true,
      timeLimeVisible: false,
      // 图表
      chart: "",
      // 快照选择索引
      KZactiveIndex: 0,
      // 时间轴x轴数据
      date: [],
      // 时间轴Y轴数据
      num: [],
      // historyName:this.historyName
      // 时间轴y轴对应的对象
      lineDateYN: {},
      // 所有的时间轴选项
      allTimeCheck: [],
      // 已经选择的时间轴选项
      checkedNames: [],
      checkedDefault: true,
      // 当前页面点
      currentMark: [],
      defaultCheck: true
    };
  },
  components: {},
  props: ["getSnapshotList", "groupDisplayName", "historyName"],
  created() {},
  watch: {
    // 监听时间轴对象选择
    checkedNames(val) {
      // console.log(val)
      // this.filterLineData(this.currentMark,this.checkedNames)
    }
  },
  mounted() {
    if (this.chart) {
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    }
  },
  methods: {
    // 监听时间轴选择
    changeselect(val) {
      console.log(1234567);
      console.log(this.currentMark);
      this.filterLineData(this.$parent.allMark, this.checkedNames);
    },
    handleClick() {
      this.showcontent = !this.showcontent;
    },
    // 选择时间轴筛选条件去筛选数据
    async filterLineData(value, checklist) {
      console.log("laile");
      // 所有的详细信息
      let allDetail = [...value];
      let lineDateX = [];
      let lineDateY = new Map();
      let lineDateNum = [];

      for (let self of allDetail) {
        for (let list of self.propertyList) {
          if (checklist.includes(list.propertyName)) {
            // 当是时间属性的时候 保存当前数据
            if (list.propertyType == "DateTime") {
              let cV = new Date(list.propertyValues[0].value).valueOf();
              if (lineDateX.indexOf(cV) == "-1") {
                lineDateX.push(cV);

                lineDateY.set(
                  cV,
                  lineDateY.get(cV)
                    ? lineDateY.get(cV).push(self.rowkey)
                    : [self.rowkey]
                );
              } else {
                if (lineDateY.get(cV)) {
                  lineDateY.get(cV).push(self.rowkey);
                }
              }
            } else if (list.propertyType == "TimeInterval") {
              let cV1 = new Date(
                list.propertyValues[0].value.timeStart
              ).valueOf();
              if (lineDateX.indexOf(cV1) == "-1") {
                lineDateX.push(cV1);
                lineDateY.set(
                  cV1,
                  lineDateY.get(cV)
                    ? lineDateY.get(cV1).push(self.rowkey)
                    : [self.rowkey]
                );
              } else {
                if (lineDateY.get(cV1)) {
                  lineDateY.get(cV1).push(self.rowkey);
                }
              }
            }
          }
        }
      }
      lineDateX.sort((a, b) => {
        return a - b;
      });
      this.date = [];
      for (let line of lineDateX) {
        this.date.push(util.timestampToTime(line));
      }
      for (let item of lineDateX) {
        this.num.push(lineDateY.get(item).length);
      }
      this.lineDateYN = lineDateY;
      this.$nextTick(() => {
        // 重新渲染图表
        this.initChart();
        this.chart.on("brushselected", this.renderBrushed);
      });
    },
    // 获取页面上点的详细信息
    async getAllDetail(value) {
      this.currentMark = value;
      console.log("diyi111111");
      this.date = [];
      this.num = [];
      // this.allTimeCheck= []
      let currentTimeCheck = [];
      // 所有的详细信息
      let allDetail = [];
      let lineDateX = [];
      let lineDateY = new Map();
      // 清空map
      lineDateY.clear();
      let lineDateNum = [];
      for (let item of value) {
        let getdetailObj = {
          rowkey: item.rowkey,
          objectUri: item.objectUri
        };
        await getdetail(getdetailObj).then(res => {
          if (res.status == 200) {
            allDetail.push(res.data);
          }
        });
      }
      console.log(allDetail);
      for (let self of allDetail) {
        for (let list of self.propertyList) {
          // 保存时间属性的属性名称
          if (
            list.propertyType == "DateTime" ||
            list.propertyType == "TimeInterval"
          ) {
            //
            let name = list.propertyName;
            if (currentTimeCheck.indexOf(name) == "-1") {
              currentTimeCheck.push(name);
            }
          }
          // 当是时间属性的时候 保存当前数据
          if (list.propertyType == "DateTime") {
            let cV = new Date(list.propertyValues[0].value).valueOf();
            if (lineDateX.indexOf(cV) == "-1") {
              lineDateX.push(cV);

              lineDateY.set(
                cV,
                lineDateY.get(cV)
                  ? lineDateY.get(cV).push(self.rowkey)
                  : [self.rowkey]
              );
            } else {
              if (lineDateY.get(cV)) {
                lineDateY.get(cV).push(self.rowkey);
              }
            }
          } else if (list.propertyType == "TimeInterval") {
            let cV1 = new Date(
              list.propertyValues[0].value.timeStart
            ).valueOf();
            if (lineDateX.indexOf(cV1) == "-1") {
              lineDateX.push(cV1);
              lineDateY.set(
                cV1,
                lineDateY.get(cV1)
                  ? lineDateY.get(cV1).push(self.rowkey)
                  : [self.rowkey]
              );
            } else {
              if (lineDateY.get(cV1)) {
                lineDateY.get(cV1).push(self.rowkey);
              }
            }
          }
        }
      }
      lineDateX.sort((a, b) => {
        return a - b;
      });
      console.log(lineDateX);
      this.date = [];
      for (let line of lineDateX) {
        this.date.push(util.timestampToTime(line));
      }
      for (let item of lineDateX) {
        this.num.push(lineDateY.get(item).length);
      }
      this.allTimeCheck = currentTimeCheck;
      this.lineDateYN = lineDateY;
      this.checkedNames = this.allTimeCheck;
      // 重新渲染图表
      this.initChart();
      this.chart.on("brushselected", this.renderBrushed);
    },
    // 获取快照上的对象生成时间轴
    getKZAllDetail(value) {
      console.log("diyi");
      console.log(value);
      this.date = [];
      this.num = [];
      // this.allTimeCheck= []
      let currentTimeCheck = [];
      // 所有的详细信息
      let allDetail = [...value];
      let lineDateX = [];
      let lineDateY = new Map();
      // 清空map
      lineDateY.clear();
      let lineDateNum = [];
      console.log(allDetail);
      for (let self of allDetail) {
        if (self.propertyList) {
          for (let list of self.propertyList) {
            // 保存时间属性的属性名称
            if (
              list.propertyType == "DateTime" ||
              list.propertyType == "TimeInterval"
            ) {
              //
              let name = list.propertyName;
              if (currentTimeCheck.indexOf(name) == "-1") {
                currentTimeCheck.push(name);
              }
            }
            // 当是时间属性的时候 保存当前数据
            if (list.propertyType == "DateTime") {
              for (let [index, listT] of list.propertyValues.entries()) {
                let cV = new Date(list.propertyValues[index].value).valueOf();
                if (lineDateX.indexOf(cV) == "-1") {
                  lineDateX.push(cV);

                  lineDateY.set(
                    cV,
                    lineDateY.get(cV)
                      ? lineDateY.get(cV).push(self.rowkey)
                      : [self.rowkey]
                  );
                } else {
                  if (lineDateY.get(cV)) {
                    lineDateY.get(cV).push(self.rowkey);
                  }
                }
              }
            } else if (list.propertyType == "TimeInterval") {
              for (let [index, listT] of list.propertyValues.entries()) {
                let cV1 = new Date(
                  list.propertyValues[index].value.timeStart
                ).valueOf();
                if (lineDateX.indexOf(cV1) == "-1") {
                  lineDateX.push(cV1);
                  lineDateY.set(
                    cV1,
                    lineDateY.get(cV1)
                      ? lineDateY.get(cV1).push(self.rowkey)
                      : [self.rowkey]
                  );
                } else {
                  if (lineDateY.get(cV1)) {
                    lineDateY.get(cV1).push(self.rowkey);
                  }
                }
              }
            }
          }
        } else {
          return false;
        }
      }
      lineDateX.sort((a, b) => {
        return a - b;
      });
      console.log(lineDateX);
      this.date = [];
      for (let line of lineDateX) {
        this.date.push(util.timestampToTime(line));
      }
      for (let item of lineDateX) {
        this.num.push(lineDateY.get(item).length);
      }
      this.allTimeCheck = currentTimeCheck;
      this.lineDateYN = lineDateY;
      this.checkedNames = this.allTimeCheck;
      console.log(lineDateY);
      console.log(this.date);
      console.log(this.num);
      this.$nextTick(() => {
        // 重新渲染图表
        this.initChart();
        this.chart.on("brushselected", this.renderBrushed);
      });
    },
    // 根据快照ID删除快照
    delSnapData: function(snapid, index) {
      this.$confirm("删除此快照, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let vm = this;
          deletedSnap(snapid)
            .then(res => {
              if (res.status == 200) {
                vm.$message({
                  message: "成功删除快照",
                  type: "success"
                });
                vm.getSnapshotList.splice(index, 1);
                console.log("opop");
                this.selectKZ(index);
                // vm.handleGetSnapDataById(this.getSnapshotList[0].id,0, this.getSnapshotList[0].description)
                // this.getSnapshotList[index]
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 编辑快照
    editKZ(des, id, index) {
      this.$parent.$refs.tooTip.photoVisible = true;
      this.$parent.$refs.tooTip.currentSnapId = id;
      this.$parent.$refs.tooTip.description = des;
      this.$parent.$refs.tooTip.kz_xz = false;
      this.$parent.$refs.tooTip.currentBJIndex = index;
    },
    // 选择快照
    selectKZ(index) {
      // 清除页面所有数据
      this.$parent.$refs.tooTip.clearOverlays();
      this.KZactiveIndex = index;
      console.log(this.getSnapshotList[index]);
      if (this.getSnapshotList[index]) {
        setTimeout(() => {
          // 保存此快照上的点对象
          this.$parent.$refs.tooTip.currentSnapEvent = JSON.parse(
            this.getSnapshotList[index].graphData
          );
          console.log('地图点数据',JSON.parse(this.getSnapshotList[index].graphData));
          
          for (let self of JSON.parse(this.getSnapshotList[index].graphData)) {
            let Cdisplayname = self.showName ? self.showName : self.displayName;
            //TODO
            this.$parent.$refs.tooTip.addMarker(
              self.longitude,
              self.latitude,
              self.rowkey,
              self.objectUri,
              self.objectType,
              Cdisplayname,
              self.name,
              self.iconUrl,
              self.belongGroup,
              self.propertyList
            );
          }
        //   this.$emit(
        //     "update:historyName",
        //     this.getSnapshotList[index].description
        //   );
        }, 0);
      }
    },
    // 获取时间轴
    getSJZ() {
      this.showcontent = true;
      this.$parent.infoVisiable = false;
      this.timeLimeVisible = true;
      console.log(this.$parent.allMark);
      this.getKZAllDetail(this.$parent.allMark);
    },
    // 历史快照
    getKZ() {
      this.showcontent = true;
      this.timeLimeVisible = false;
    },
    //时间轴柱状图
    initChart() {
      this.chart = echarts.init(document.getElementById("container"));
      console.log(this.chart);
      var option = null;
      option = {
        // 默认颜色
        color: ["#000"],
        brush: {
          toolbox: ["lineX"],
          xAxisIndex: "all",
          throttleType: "debounce",
          throttleDelay: 100,
          outOfBrush: {
            color: "#ff00f7",
            colorAlpha: 1
          },
          inBrush: {
            color: "#d02a1d",
            colorAlpha: 1
          }
        },
        grid: {
          top: "10%",
          left: "1%",
          right: "1%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.date, //时间
          splitLine: { show: false }, //去除网格线
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //左边线的颜色
              width: "2" //坐标线的宽度
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: function(value) {
              return value.split(" ").join("\n");
            },
            textStyle: {
              color: "#fff" //坐标值得具体的颜色
            }
          }
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          splitLine: { show: false }, //去除网格线
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //左边线的颜色
              width: "2" //坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: "#fff" //坐标值得具体的颜色
            }
          }
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            data: this.num, //数据
            type: "bar",
            itemStyle: {
              normal: {
                color: "#d27171"
              }
            },
            barWidth: 30
          }
        ]
      };
      this.chart.setOption(option, true);
      this.chart.dispatchAction({
        type: "takeGlobalCursor",
        key: "brush",
        brushOption: {
          brushType: "lineX"
        }
      });
    },
    // 选择数据
    renderBrushed(params) {
      let PD = params.batch[0].selected[0].dataIndex;
      let lineData = this.date.slice(PD[0], PD.length + PD[0]);
      let result = [];
      // var allOverlay = this.map.getOverlays()
      //根据选择的时间段筛选出对象
      for (let item of lineData) {
        for (let list of this.lineDateYN.get(new Date(item).valueOf()))
          result.push(list);
      }
      if ([...new Set(result)].length > 0) {
        this.$parent.showOverlays([...new Set(result)]);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  position: absolute;
  bottom: 0;
  background: #ffffff;
  transition: bottom 0.2s;
  -webkit-transition: bottom 0.2s; /* Safari */
  &.active {
    bottom: 150px;
  }
  .text {
    color: #777;
    font-weight: bold;
    display: flex;
    align-items: center;
    span {
      padding: 10px 5px 0 5px;
    }
  }
  .list {
    display: flex;
    li {
      padding: 10px 5px;
      cursor: pointer;
      background: #ffffff;
      &.active {
        color: #08c;
      }
      .fa {
        color: #08c;
      }
    }
  }
}
.timeline {
  .content {
    height: 0;
    transition: height 0.2s;
    -webkit-transition: height 0.2s; /* Safari */
    &.active {
      height: 150px;
    }
    .lskz {
      background: #696969;
      height: 100%;
      display: flex;
      overflow-y: auto;
      flex-wrap: wrap;
      padding: 10px 0;
      .nodata {
        width: 100%;
        display: flex;
        color: #c3c4c4;
        font-size: 18px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
      }
      .box {
        // flex: 0 0 50%;
        width: 12%;
        height: 0px;
        padding-bottom: 8%;
        background: #ffffff;
        margin: 0 10px;
        margin-bottom: 10px;
        border-radius: 5%;
        position: relative;
        border: 5px solid#ffffff;
        cursor: pointer;
        &:hover {
          .hoverBox {
            opacity: 1;
          }
        }
        &.active {
          border: 5px solid#3aa6f0;
        }
        .hoverBox {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          align-items: center;
          justify-content: center;
        }
        .text {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          p {
            width: 100%;
            padding: 10px 0;
            text-align: center;
          }
        }
      }
    }
    .popover {
      position: absolute;
      right: 0;
      top: 0;
      .icon_select {
        background: #000000;
        box-shadow: none;
        border: 1px solid #aaaaaa;
        color: white;
        font-size: 17px;
        padding: 3px;
        width: auto;
        opacity: 0.5;
      }
    }
  }
}
</style>
<style lang="less">
#allTimeCheck {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  .el-checkbox {
    margin: 0;
    color: #ffffff;
    width: 100%;
  }
}
.line-popover {
  background: #444 !important;
  color: white;
  opacity: 0.9;
  .el-popover__title {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 6px;
    border-bottom: 1px solid#ccc;
    padding-bottom: 6px;
  }
  .popper__arrow {
    &::after {
      border-top-color: #5f5f5f !important;
    }
  }
}
</style>
